<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="page">
        <el-form-item label="人员搜索：">
          <el-input v-model="page.userName" class="elinput1" clearable placeholder="请输入" />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button class="btn1" size="small" icon="el-icon-circle-plus-outline" @click="addList">新建</el-button>
      <el-table
        :data="userList"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="userName"
          label="人员名称"
        />
        <el-table-column
          prop="regionName"
          label="归属区域"
        />
        <el-table-column
          prop="role.roleName"
          label="角色"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
        />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-link type="primary" @click="editList(row)">修改</el-link>
            <el-link type="danger" @click="deleList(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="addDialog"
      width="40%"
      @close="closeAdd"
    >
      <el-form ref="ruleForm" :model="addFrom" :rules="addrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="人员名称：" prop="userName">
          <el-input v-model="addFrom.userName" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="角色：" prop="roleId">
          <el-select v-model="addFrom.roleId" placeholder="请选择">
            <el-option label="运营员" value="2" />
            <el-option label="维修员" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input v-model="addFrom.mobile" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="负责区域：" prop="role">
          <el-select v-model="addFrom.regionId" placeholder="请选择">
            <el-option v-for="(item,i) in region" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="头像：" prop="name">
          <Upload v-model="addFrom.image" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <input v-model="addFrom.status" type="checkbox"> <span class="span">是否启用</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAddition">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="editDialog"
      width="40%"
      @close="closeEdit"
    >
      <el-form ref="editruleForm" :model="addFrom" :rules="editrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="人员名称：" prop="userName">
          <el-input v-model="addFrom.userName" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="角色：" prop="roleId">
          <el-select v-model="addFrom.roleId" placeholder="请选择">
            <el-option label="运营员" value="2" />
            <el-option label="维修员" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input v-model="addFrom.mobile" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="负责区域：" prop="role">
          <el-select v-model="addFrom.regionId" placeholder="请选择">
            <el-option v-for="(item,i) in region" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="头像：" prop="image">
          <Upload v-model="addFrom.image" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <input v-model="addFrom.status" type="checkbox"> <span class="span">是否启用</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="determineTheModifications">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// image
import { userAPI, regionAPI, addUserAPI, editUserAPI, deleUserAPI } from '@/api/user'
import Upload from '@/components/Upload/index.vue'
export default {
  components: { Upload },
  data() {
    return {
      page: {
        pageIndex: 1,
        pageSize: 10,
        userName: ''
      },
      totalCount: null,
      userList: [],
      addDialog: false,
      editDialog: false,
      addFrom: {
        // 电话
        mobile: '',
        // 姓名
        userName: '',
        // 是否可选
        status: null,
        // 区域id
        regionId: '',
        // 角色
        roleId: '',
        // img
        image: ''
      },
      addrules: {
        userName: [
          { required: true, message: '请输入人员名称：', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请输入角色：', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话：', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号格式' }
        ],
        role: [
          { required: true, message: '请输入负责区域：', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入状态：', trigger: 'blur' }
        ]
      },
      editrules: {
        userName: [
          { required: true, message: '请输入人员名称：', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请输入角色：', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话：', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号格式' }
        ],
        role: [
          { required: true, message: '请输入负责区域：', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入状态：', trigger: 'blur' }
        ]
      },
      region: [],
      ids: null
    }
  },
  created() {
    this.getUserAPI()
  },
  methods: {
    async getUserAPI() {
      const res = await userAPI(this.page)
      this.totalCount = res.totalCount - 0
      this.userList = res.currentPageRecords
    },
    inquire() {
      this.getUserAPI()
    },
    // 新建
    async addList() {
      this.addDialog = true
      const res = await regionAPI()
      this.region = res.currentPageRecords
    },
    // 确定添加
    async confirmTheAddition() {
      await addUserAPI(this.addFrom).catch(() => this.$message.error('已存在此名称的对象'))
      this.getUserAPI()
      this.addDialog = false
    },
    // 编辑
    async editList(row) {
      this.editDialog = true
      this.ids = row.id
      const res = await regionAPI()
      this.region = res.currentPageRecords
      this.addFrom.userName = row.userName
      this.addFrom.roleId = row.roleId
      this.addFrom.mobile = row.mobile
      this.addFrom.status = row.status
      this.addFrom.image = row.image
    },
    // 确定修改
    async determineTheModifications() {
      await editUserAPI(this.addFrom, this.ids)
      this.getUserAPI()
      this.$message.success('更新成功！')
      this.editDialog = false
    },
    // 删除
    async deleList(row) {
      const prve = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') { return this.$message('已取消删除') }
      await deleUserAPI(row.id)
      this.$message.success('删除成功！')
      this.getUserAPI()
    },
    // 关闭事件
    closeAdd() {
      this.$refs.ruleForm.resetFields()
    },
    closeEdit() {
      this.$refs.editruleForm.resetFields()
    },
    // 页码值切换
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.getUserAPI()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.getUserAPI()
    }
  }
}
</script>

<style lang="scss" scoped>

.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.btn1{
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
    color: #fff;

}
.el-link{
  margin-right: 15px;
}
.span{
  margin-left: 10px;
}
.el-select {
  width: 100%;
}
</style>
